<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://www.makeapie.cn/dep/echarts/map/js/world.js"></script>
    <script src="/echarts/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.js}"></script>
    <title>Title</title>
</head>
<body class="childrenBody">
<div >
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <div id="main" style="width: 900px;height:700px;"></div>
    </div>
</div>
<script>
  var myChart = echarts.init(document.getElementById('main'));
  option = {
    title: {
      text: '世界疫情地图',
      subtext: '累计确诊人数',
      left: 'center',
      top: 'top'
    },
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        var value = params.value + '';
        return params.seriesName + '<br/>' + params.name + ' : ' + value+'人';
      }
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: {
          readOnly: false
        },
        restore: {},
        saveAsImage: {}
      }
    },
    visualMap: {
      min: 0,
      max: 2200000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      color: ['orangered', 'yellow', 'lightskyblue']
    },
  };
  $.ajax({
      dataType:"JSON",
      url:"/world/queryWorld",
      success:function (data){
          myChart.setOption({
              series: [{
                  name: '确诊人数',
                  type: 'map',
                  mapType: 'world',
                  roam: true,
                  itemStyle: {
                      emphasis: {
                          label: {
                              show: true
                          }
                      }
                  },
                  data:data

              }]
          })
      }
  })
  myChart.setOption(option);
</script>
</body>
</html>